<template>
  <h-modal
    :title='title'
    width='100%'
    inner
    :visible='visible'
    :getContainer='getContainer'
    fullScreen
    @cancel='handleCancel'>
    <div slot='footer'>
      <a-button type='ghost-danger' @click='handleCancel'>关闭</a-button>
    </div>
    <div class='content' ref='content'>
      <div class='content-left'>
        <div v-for='item in layerColumns' :id='item.id' :key='item.key' class='content-left-item' ref='contentLeftItem'>
          <template v-if="item.key === '1'">
            <div class='headerBox'>{{ item.title }}</div>
            <div class='content-left-item-content'>
              <a-descriptions bordered size='small'>
                <a-descriptions-item v-for='(item,index) in formData' :key='index' :label='item.label'>{{
                    item.dictCode ? transformDataByDict(item.dictCode, item.content) : item.content
                  }}
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </template>
          <template v-if="item.key === '2'">
            <div class='headerBox'>{{ item.title }}</div>
            <div class='content-left-item-content'>
              <accounting-overview ref='accountingOverview'></accounting-overview>
            </div>
          </template>
          <template v-if="item.key === '3'">
            <div class='headerBox'>{{ item.title }}</div>
            <div class='content-left-item-content'>
              <contract-cost   @change='seeDetail' ref='contractCost'></contract-cost>
            </div>
          </template>
          <template v-if="item.key === '4'">
            <div class='headerBox'>{{ item.title }}</div>
            <div class='content-left-item-content'>
              <purchase-details @change='seeDetail' ref='PurchaseDetails'></purchase-details>
            </div>
          </template>
          <template v-if="item.key === '5'">
            <div class='headerBox'>{{ item.title }}</div>
            <div class='content-left-item-content'>
              <implementation-details  @change='seeDetail' ref='ImplementationDetails'></implementation-details>
            </div>
          </template>
        </div>
      </div>
      <div class='content-right'>
        <hf-elevator-layer @change='elevatorChange' :layerColumns='layerColumns'
                           :defaultActive='defaultActive'></hf-elevator-layer>
      </div>
    </div>
    <hf-pm-project-details-modal ref='HfPmProjectDetailsModal'></hf-pm-project-details-modal>
  </h-modal>
</template>

<script>
import HfElevatorLayer from '@/views/hifar/components/HfElevatorLayer'
import { filterDictTextByCache } from '@comp/dict/JDictSelectUtil'
import AccountingOverview from '@views/hifar/pm/modules/AccountingOverview'
import { getAction } from '@api/manage'
import { randomUUID, splitByNum } from '@/utils/util'
import ContractCost from '@views/hifar/pm/modules/ContractCost'
import PurchaseDetails from '@views/hifar/pm/modules/PurchaseDetails'
import ImplementationDetails from '@views/hifar/pm/modules/ImplementationDetails'
import HfPmProjectDetailsModal from '@views/hifar/pm/modules/HfPmProjectDetailsModal'

export default {
  name: 'HfPmProjectCheckModal',
  components: { ImplementationDetails, ContractCost, AccountingOverview, HfElevatorLayer, PurchaseDetails ,HfPmProjectDetailsModal},
  inject: {
    getContainer: {
      default: () => document.body
    }
  },
  props: {},
  data() {
    return {
      title: '详情',
      visible: false,
      defaultActive: 1,
      url: {
        findCheckVOById: '/pm/hfPmProjectCheck/findCheckVOById',
        details: '/pm/hfPmProjectCheck/details'
      },
      formData: [
        { label: '项目编号', field: 'code', content: '' },
        { label: '项目简称', field: 'shortName', content: '' },
        { label: '项目经理', field: 'charger', content: '' },
        { label: '销售经理', field: 'saleLeader', content: '' },
        { label: '合同编号', field: 'contractNum', content: '' },
        { label: '合同金额', field: 'money', content: '', isNum: true },
        { label: '签订日期', field: 'signDate', content: '' },
        { label: '项目状态', field: 'projectState', content: '', dictCode: 'hf_project_states' },
        { label: '项目分类', field: 'type', content: '', dictCode: 'icm_project_type' },
        { label: '客户名称', field: 'customerName', content: '' },
        { label: '计划开始时间', field: 'planStartTime', content: '' },
        { label: '计划结束时间', field: 'planEndTime', content: '' },
        { label: '回款负责人', field: 'paymentCharger', content: '' }
      ],
      layerColumns: [
        { title: '基本信息', key: '1', id: randomUUID() },
        { title: '核算总览', key: '2', id: randomUUID() },
        { title: '合同成本', key: '3', id: randomUUID() },
        { title: '采购成本', key: '4', id: randomUUID() },
        { title: '实施成本', key: '5', id: randomUUID() }
      ],
      mainId: ''
    }
  },
  mounted() {

  },
  methods: {
    seeDetail(field) {
      console.log(field)
      let params = {
        value: field,
        id: this.mainId
      }
      getAction(this.url.details, params).then(res => {
          if(res.success){
            this.$refs.HfPmProjectDetailsModal.show(res.result,field)
          }
      })
    },
    formatValue(value) {
      return value ? value.toFixed(2) : value
    },
    scrollEvent() {
      let activeIndex = 0
      document.querySelector('.ant-modal-body').addEventListener('scroll', (e) => {
        for (let i = 0; i < this.$refs.contentLeftItem.length; i++) {
          if (e.target.scrollTop + 55 >= this.$refs.contentLeftItem[i].offsetTop) {
            activeIndex = i + 1
          }
        }
        this.defaultActive = activeIndex
      })
    },
    elevatorChange(item) {
      let dom = document.getElementById(item.id)
      dom.scrollIntoView({ behavior: 'smooth' })
    },
    findCheckVOById(id) {
      this.mainId = id
      getAction(this.url.findCheckVOById, { id }).then(res => {
        if (res.success) {
          for (let key in res.result) {
            this.formData.map(item => {
              if (key === item.field) {
                if (item.isNum) {
                  item.content = splitByNum(+res.result[key])
                } else {
                  item.content = res.result[key]
                }
              }
            })
          }
          this.$forceUpdate()
        }
      })
    },
    transformDataByDict(dictCode, key) {
      return filterDictTextByCache(dictCode, key)
    },
    show(record) {
      this.visible = true
      this.findCheckVOById(record.id)
      this.$nextTick(() => {
        this.$refs.contractCost[0].loadData(record.id)
        this.$refs.accountingOverview[0].loadData(record.id)
        this.$refs.PurchaseDetails[0].loadData(record.id)
        this.$refs.ImplementationDetails[0].loadData(record.id)
        this.scrollEvent()
      })
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  &-left {
    width: 95%;

    &-item {
      .headerBox {
        position: relative;
        margin-left: 20px;
        font-size: 18px;
        color: black;

        &:after {
          content: "";
          width: calc(100% - 100px);
          height: 1px;
          position: absolute;
          right: 0;
          top: 50%;
          background: #d9d9d9;
        }

        &:before {
          content: "";
          width: 5px;
          height: 100%;
          position: absolute;
          left: -15px;
          top: 0;
          background: #1890ff;
        }
      }

      &-content {
        padding: 15px 0 20px 30px;

        .ant-descriptions-item-label {
          width: 200px;
          min-width: 100px;
        }
      }
    }
  }

  &-right {
    position: relative;
    width: 5%;
  }
}
</style>